<template>
     <div>
          <div v-if="isLogin">
               <div class="member">
                    <div class="header-con">
                         <div class="user-info">
                              <div class="avatar-con">
                                   <div class="avatar">
                                        <img src="../assets/images/avatar_default.png" class="image-info">
                                   </div>
                              </div>
                              <div class="person-con">
                                   <span>{{ username }}</span>
                              </div>
                         </div>
                    </div>
               </div>
               <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell mui-media">
                         <router-link :to="{ name: 'order_list' }" class="mui-navigate-right">
                              <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
                              <div class="mui-media-body">我的订单</div>
                         </router-link>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                         <router-link class="mui-navigate-right" :to="{ name: 'address' }">
                              <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
                              <div class="mui-media-body">收货地址</div>
                         </router-link>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                         <div @click="logout" class="mui-navigate-right">
                              <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
                              <div class="mui-media-body">退出登录</div>
                         </div>
                    </li>
               </ul>
          </div>
          <div v-else>
               <div class="member">
                    <div class="header-con">
                         <router-link :to="{ name: 'login' }" class="mui-navigate-right">
                              <div class="user-info">
                                   <!-- 用户信息 -->
                                   <div class="avatar-con">
                                        <div class="avatar">
                                             <img src="../assets/images/avatar_default.png" class="image-info">
                                        </div>
                                   </div>
                                   <div class="person-con">
                                        <span>登录 / 注册</span>
                                   </div>
                              </div>
                         </router-link>
                    </div>
               </div>
          </div>
     </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { mapState } from 'vuex'

export default {
     computed: {
          ...mapState({
               username: state => state.user.username
          }),
          ...mapGetters('user', { isLogin: 'isLogin' })
     },
     methods: {
          logout() {
               this.$http.get('logout')
               this.$store.commit('user/logout')
               this.$auth.setAuthorization('')
               this.$toast('退出成功')
          }
     }

}
</script>

<style lang="scss" scoped>
.mui-table-view .mui-media,
.mui-table-view .mui-media-body {
     line-height: 42px;
}

.mui-table-view-cell:after {
     left: 0px;
}

.member {
     margin-bottom: 15px;

     .header-con {
          padding: 10px;
          background-color: #fff;

          .user-info {
               position: relative;
               overflow: hidden;
               width: 100%;
               height: 120px;
               background: linear-gradient(90deg, #28a2ff, #ffd787);
               box-shadow: 0 0.1rem 0.25rem #f8e3c6;

               .avatar-con {
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);

                    .avatar {
                         width: 60px;
                         height: 60px;
                         overflow: hidden;
                         box-shadow: 0 2px 10px rgba(0, 0, 0, 15);
                         border: 1px solid hsla(0, 0%, 100%, .4);
                         border-radius: 50% 50%;

                         .image-info {
                              width: 100%;
                              height: 100%;
                         }
                    }
               }

               .person-con {
                    position: absolute;
                    left: 90px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #fff;
               }
          }
     }
}
</style>
